<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
 class Box extends React.Component{
     constructor(props){
         super(props)
     }
     render(){
         return (<div>
         <Father/>
         </div>)
     }
 }

 class Father extends React.Component{
     constructor(props){
         super(props)
         this.state={
             money:10000
         }
     }
     hardWork(){
        let money=this.state.money+10000
        this.setState({
            money:money
        })
     }
     moreHardWork(){
        let money=this.state.money+20000
        this.setState({
            money:money
        })    
    }
     render(){
         let money=this.state.money
         return (<div>
         Father.money {money}
         <button onClick={e=>this.hardWork()}>努力工作</button>
          <Children house="四合院" money={money/2} onMoney={this.moreHardWork.bind(this)}/>
         </div>)
     }
 }

 class Children extends React.Component{
     constructor(props){
         super(props)
     }
     hardPlay(){
        //  debugger
       this.props.onMoney()
     }
     render(){
         let {house,money}=this.props
         return (<div>
         Children {money}
         <button onClick={e=>this.hardPlay()}>更努力的赚钱</button>
         </div>)
     }
 }


 ReactDOM.render(<Box/>,document.getElementById("app"))
</script>
</html>